<template>
  <view class="foodList" >
  <swiper :indicator-dots="true" class="food-swiper" indicator-color="blue" circular="true">
    <swiper-item class="food-swiper-item">
      <view class="swiper-item-view" v-for="(i,index) in foodsImg1" :key="index">
        <img :src="i.urls" class="swiper-item-img"/>
         <text>{{i.title}}</text>
      </view>
    </swiper-item>
   <swiper-item class="food-swiper-item">
      <view class="swiper-item-view" v-for="(i,index) in foodsImg2" :key="index">
        <img :src="i.urls" class="swiper-item-img"/>
         <text>{{i.title}}</text>
      </view>
    </swiper-item>
  </swiper>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
  			 foodsList:[],
         foodsImg1:[],
         foodsImg2:[]
  		}
  	},
    mounted(){
      this.getfoodList()
    },
  	methods: {
    async getfoodList(){
      let result = await uni.$http.get('/v2/index_entry')
      if(result.statusCode==200){
        // console.log(result)
        this.foodsList = result.data
        this.foodsList.forEach(item =>{
          item.urls = "https://fuss10.elemecdn.com"+item.image_url
        }) 
        this.foodsImg1 = this.foodsList.slice(8)
        this.foodsImg2 = this.foodsList.slice(0,8)
      }
    }
  	}
  }
</script>

<style lang="less">
  .foodList{
    width:100%; 
   .food-swiper{
     width:100%;
     height: 360rpx;
     .food-swiper-item{
     .swiper-item-view{
       display: inline-block;
       text{
         display: block;
         font-size: 26rpx;
         text-align: center;
       }
       .swiper-item-img{
         width:109rpx;
         height:109rpx;
         margin-left:48rpx;
         margin-right:30rpx;
       }
     }  
     }
   }
  }
</style>